<template>

  <div class="user_racelist" id='user_racelist'>
    <drawer :show.sync="drawerVisibility" :show-mode="showModeValue" :placement="showPlacementValue" :drawer-style="{'background-color':'#35495e', width: '200px'}" style="height:100vh">

      <div slot="drawer">
        1111
      </div>

      <view-box ref="viewBox" style="height:100%;">
        <x-header :left-options="{backText: ''}" style="color:white" title="use prop:title">
          <span slot="overwrite-title">我的报名</span>
          <a href="./#/racelist" style="font-size:24px" slot="right">
            <i class="fa fa-home fa-fw"></i>
          </a>
        </x-header>

        <div >

          <ul>
            <li style="display: none">
              <panel :list="list" :type="type"></panel>
            </li>

            <card   :header="{title:'赛事列表' }">
              <div  slot="content" class="card-padding">
                <scroller   style="top:0px" lock-x scrollbar-y height="-132" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
                  <div class="flexwrapper">
                    <flexbox :gutter="0" wrap="wrap">
                      <flexbox-item v-for="(item,index) in list" :key="index" align='center' :span="1/2">
                        <div @click="goLink('./message',item.id)" class="vux-1px flex-demo">
                          <div class="needsclick">
                            <img class="needsclick logo" :src='item.header' alt="">
                          </div>
                          <div class="content needsclick">
                            <p class="title">{{item.name}}</p>
                            <p class="time">{{item.date}}</p>
                          </div>
                          <a href="javascript:void(0)" @click="goLink('signup',item.id)">
                          </a>
                        </div>
                      </flexbox-item>
                    </flexbox>

                  </div>

                  <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
                    <span v-show="demo4Value.pullupStatus === 'default'"></span>
                    <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
                    <span v-show="demo4Value.pullupStatus === 'loading'">
                      <spinner type="ios-small"></spinner>
                    </span>
                  </div>
                  <div v-if='stop' class="nomore">

                  </div>
                </scroller>
              </div>

            </card>


              <div v-if='list.length<=0&&isShow'  class="card-padding" style="text-align: center;position: absolute;width: 100%;top: 100px;">
                暂没有比赛
              </div>


          </ul>

          <!-- <circle-menu type="top" :number='3' mask='black' btn circle>
            <a slot="item_1" class="fa fa-twitter fa-lg"></a>
            <a slot="item_2" class="fa fa-weixin fa-lg"></a>
            <a slot="item_3" class="fa fa-weibo fa-lg"></a>
          </circle-menu> -->

        </div>

        <myFooter :page="pageConfig"></myFooter>
      </view-box>
      <div @click="modal" class="modal"></div>

    </drawer>

  </div>

</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
const countTime = 60; //倒数计时60秒

import Myheader from "@/common/components/myheader.vue";
import { cookie } from "vux";
import myFooter from "@/common/components/myfooter.vue";
import mixin from "@/common/js/mixin";
//import {host} from "@/api/config";
//let host = "http://jiangtao.v3.ihuipao.com/";

import {
  Card,
  Panel,
  XHeader,
  Search,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  ViewBox,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  Scroller,
  Spinner,
  Flexbox,
  Drawer,
  FlexboxItem,
  TransferDomDirective as TransferDom
} from "vux";

import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";
import CircleMenu from "vue-circle-menu";

import { isIdNumber,setTitle } from "@/common/js/main.js";

export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      showMore: true,
      type: "5",
      pageIndex: 10,
      config: {
        perpage: 8, //分页数量
        page: 1, //当前页数
        hasmorepage: false //是否还有分页
      },
      searchConfig: {},
      showModeValue: "overlay",
      showPlacementValue: "right",
      stop: false,
      drawerVisibility: false,
      demo4Value: {
        pullupStatus: "default"
      },
      pageConfig: window.pageConfig,
      value: "",
      list: [],
      isShow:false
    };
  },
  computed: {},
  beforeCreate() {
    if (
      //如果没有_sid就去登录
      typeof cookie.get("_sid") == "undefined" ||
      window.localStorage.getItem("isLogin") == "false"
    ) {
      this.$router.push({ path: "login" });
    }

    setTitle("我的报名");
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    goLink(routerName, raceId) {
      let _this = this;
      window.raceId = raceId;
      _this.$router.push({ path: routerName, query: { race_id: raceId } });
    },
    load4() {
      this.demo4Value.pullupStatus = "up";

      this.pageIndex += 10;

      this.getList(this.searchConfig);

      // this.$nextTick(() => {
      //   this.$refs.scroller.reset();
      // });
    },
    errorImg(index) {
      console.log(index);
      //.src="http://placeholder.qiniudn.com/70x70/3cc51f/ffffff"
    },
    getList(config) {
      let _this = this;
      config = Object.assign({ perpage: this.config.perpage }, config);

      if (!!this.stop) {
        return;
      }

      config = {
        page: this.pageIndex
      };

      axios.post(`${host}user/auth/mysign`, qs.stringify(config)).then(
        response => {
          if (response.data.code == "200") {
            //response.data.data.data=[]
            //response.data.data.total=0
            //mock开始
            // response.data = {
            //   code: "200",
            //   msg: "success",
            //   data: {
            //     current_page: 1,
            //     data: [
            //       {
            //         id: 11,
            //         uid: null,
            //         siteid: 12,
            //         name:
            //           "2018\u6bd4\u4f5b\u5229\u65e0\u9521\u9a6c\u62c9\u677e",
            //         keyname: "bifolimarathon",
            //         time: "2018-03-25 07:30:00",
            //         multiple: 0,
            //         country: "01",
            //         province: "320000",
            //         city: "320200",
            //         address: null,
            //         type: "\u8def\u8dd1",
            //         logo:
            //           "http://stor.ihuipao.cn/ueditor/php/upload/image/20180117/1516193403314248.png",
            //         cover:
            //           "http://stor.ihuipao.cn/ueditor/php/upload/image/20180117/1516193403314248.png",
            //         rule: 1,
            //         map: 5,
            //         disclaimer: 14,
            //         notes: 2,
            //         package: 6,
            //         header:
            //           "http://r3.ihuipao.cn/race/2018/wuximarathon/app/imgs/header.png",
            //         footer:
            //           "http://r3.ihuipao.cn/race/2018/wuximarathon/app/imgs/footer.jpg",
            //         homepage: "http://wuximarathon.com",
            //         tel: "4009942195",
            //         ad:
            //           '<p>\r\n    <a href="http://ihuipao.com/hotel?raceid=661" target="_self"><img src="http://stor.ihuipao.cn/ueditor/php/upload/image/20180113/1515810611846419.png" title="1515736143806251.png" alt="image.png"/></a>\r\n</p>',
            //         publish_at: "2017-12-27 00:00:00",
            //         created_at: "2017-12-18 20:23:39",
            //         updated_at: "2017-12-19 00:17:44",
            //         deleted_at: null
            //       }
            //     ],
            //     from: 1,
            //     last_page: 1,
            //     next_page_url: null,
            //     path: "http://jiangtao.v3.ihuipao.com/user/auth/mysign",
            //     per_page: 15,
            //     prev_page_url: null,
            //     to: 1,
            //     total: 1
            //   }
            // };
            this.isShow=true
            //console.log(response.data.data);
            //mock结束
            response.data.data.data.forEach(function(item, index) {
              item.date = item.time.split(" ")[0];
              //console.log(item.time.split(" ")[0])

              if (item.header == null || item.header == "") {
                item.header = item.footer;
              }
            });

            _this.list = response.data.data.data;

            _this.$set(_this, "list", _this.list);

            if (this.list.length >= response.data.data.total) {
              this.stop = true;
            } else if (response.data.data.length == 0) {
              this.stop = false;
            } else {
              this.stop = false;
            }

            _this.demo4Value.pullupStatus = "default";

            //console.log(response.data.data);
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    modal() {
      let flexItems = document.querySelectorAll(".selection .flex-demo");
      //let flexItem = document.querySelectorAll('.flex-demo')[index];
      let lists = document.querySelectorAll(".wrapper>div>ul>li");

      [].forEach.call(flexItems, function(item, index) {
        item.querySelector("i").className = "fa fa-sort-down";
        lists[index].style.display = "none";
        document.querySelector("#app .modal").style.display = "none";
      });
    },
    chooseDate(e) {
      //console.log(e.target)

      if (e.target.innerHTML == "年") {
        document.querySelectorAll(".data-right")[0].style.display = "none";
        document.querySelectorAll(".data-right")[1].style.display = "block";
      } else {
        document.querySelectorAll(".data-right")[1].style.display = "none";
        document.querySelectorAll(".data-right")[0].style.display = "block";
      }
    },
    toggle(e, index) {
      let flexItems = document.querySelectorAll(".selection .flex-demo");

      let flexItem = document.querySelectorAll(".flex-demo")[index];
      let lists = document.querySelectorAll(".wrapper>div>ul>li");

      //console.log(lists[index])
      //lists[index].style.display = 'block'

      if (flexItem.querySelector("i").className.indexOf("fa-sort-down") != -1) {
        // console.log(flexItem.querySelector('i').className)
        //   console.log(flexItem.querySelector('i').className.indexOf("fa-sort-down"))
        [].forEach.call(flexItems, function(item, index) {
          item.querySelector("i").className = "fa fa-sort-down";
          lists[index].style.display = "none";
        });
        flexItem.querySelector("i").className = "fa fa-sort-up";
        lists[index].style.display = "block";
        document.querySelector("#app .modal").style.display = "block";
      } else if (
        flexItem.querySelector("i").className.indexOf("fa-sort-up") != -1
      ) {
        flexItem.querySelector("i").className = "fa fa-sort-down";
        lists[index].style.display = "none";
        document.querySelector("#app .modal").style.display = "none";
      }

      //        if(index==1){
      //          document.querySelectorAll('.data-right')[0].style.display='block'
      //        }
    },
    toggleArea(e, index) {
      let area = document.querySelector(".area");
      //e.target.style.color='red';

      [].forEach.call(area.querySelectorAll("ul li"), function(item, index) {
        item.style.display = "none";
      });

      area.querySelectorAll("ul li")[index].style.display = "block";
      //console.log(index)
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Card,
    Panel,
    XHeader,
    Search,
    myFooter,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    ViewBox,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Myheader,
    Confirm,
    Flexbox,
    Drawer,
    Scroller,
    Spinner,
    CircleMenu,
    FlexboxItem
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
body,
html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

#user_racelist .vux-1px {
  padding-top: 0;
}

.flexwrapper {
  .flex-demo {
    width: 90%;
    background-clip: padding-box;
    margin-top: 10px;
    padding-bottom: 10px;
    img {
      width: 100%;
    }
  }
  .content {
    padding-left: 20px;
    padding-right: 20px;

    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      color: black;
      margin: 10px 0 10px 0;
      line-height: 1.2;
    }
    .time {
      font-size: 12px;
      color: #2179cc;
      margin-bottom: 10px;
    }
  }
  .button {
    height: 34px;
    line-height: 34px;
  }

  a {
    touch-action: none;
  }
}

#racelist .content {
  padding-bottom: 0;
}

#race html,
#app body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

#racuser_racelistelist .card-padding {
  padding: 0;
}

#user_racelist .selection .flex-demo {
  overflow: hidden;
}

.flex-demo {
  text-align: center;
  //overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#user_racelist .weui-media-box_appmsg .weui-media-box__hd {
  width: 70px;
  height: 70px;
}

#user_racelist .status {
  position: absolute;
  top: 4px;
  right: 0;
}

#racelist .vux-header .vux-header-left {
  top: 7px;
}

#user_racelist .vux-header-title-area {
  text-align: center;
  line-height: 40px;
}

#user_racelist .footerBanner {
  display: none;
}

#user_racelist .weui-tab__panel {
  padding-bottom: 0;
}

#user_racelist ul {
  background-color: #fcf9fe;
  li {
    background-color: white;
    //margin-top: 10px;
  }
}

#user_racelist .selection {
  background-color: white;
  line-height: 30px;
  position: relative;
  z-index: 3;
}

#user_racelist .flex-demo .fa {
  vertical-align: text-top;
  padding-left: 5px;
}

#user_racelist .flex-demo .fa-sort-up {
  position: relative;
  top: 7px;
}

#user_racelist .wrapper {
  position: absolute;
  left: 0px;
  top: 40px;
  z-index: 1;
  width: 100vw;
  height: 100%;
}

#user_racelist .modal {
  background-color: #000;
  width: 100%;
  height: 100vh;
  display: none;
  opacity: 0.6;
  position: absolute;
  top: 0;
  z-index: 2;
}

#user_racelist .wrapper li {
  display: none;
  & > div > div {
    margin-top: -10px;
    margin-bottom: 10px;
  }
}

#racelist .area .vux-flexbox-item {
  text-align: center;
}

#user_racelist .area span {
  padding: 10px;
  line-height: 2;
  display: inline-block;
}

#user_racelist .data-box {
  display: flex;
  .data-left {
    flex: 1;
    text-align: center;
  }
  .data-right {
    flex: 2;
  }
}

#user_racelist #CircleMenu {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

#user_racelist .vux-search-box {
  z-index: 3;
  position: relative;
}

#user_racelist .vux-header {
  position: relative;
  z-index: 3;
}

#user_racelist .wrapper {
  padding: 0;
}

// #user_racelist .vux-header .vux-header-left .left-arrow {
//   top: 0;
// }

.user_racelist #vux_view_box_body > div > ul {
  margin-top: -13px;
}

.user_racelist .flexwrapper .content{
  padding-bottom: 10px;
}

.user_racelist .flexwrapper .flex-demo {
  margin-bottom: 10px;
}
</style>






